<template>
  <div class="echarts-demo">
    <!-- [1] 为 ECharts 准备一个具备大小 (宽高) 的 DOM -->
    <div  id="chart" ref="chart" style="width: 400px; height: 400px"></div>
    <div  id="chart2" ref="chart2" style="width: 450px; height: 400px"></div>
    <div  id="chart3" ref="chart3" style="width: 400px; height: 400px"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import {getDashboard} from "@/network/admin";
export default {
  name: "DashBoard",
  data() {
    return {
      chartData:[
        { value: 0, name: "普通用户" },
        { value: 0, name: "企业用户" },
        { value: 0, name: "管理员" }
      ],
      chartData2:[
        { value: 10, name: "企业" },
        { value: 8, name: "职位" },
        { value: 5, name: "简历" },
        { value: 11, name: "宣讲视频" },
        { value: 15, name: "宣讲直播" },
      ],
      chartData3:[
        { value: 10, name: "文章" },
        { value: 15, name: "评论" },
        { value: 20, name: "资讯" },
        { value: 25, name: "简历模板" },
      ]
    };
  },
  computed:{
    values(){
      return this.chartData
    },
    values2(){
      return this.chartData2
    },
    values3(){
      return this.chartData3
    },
  },
  created() {
    getDashboard()
        .then(res=>{
          const adminCount =  res.data.data.adminCount;
          const userCount =  res.data.data.userCount;
          const companyUserCount =  res.data.data.companyUserCount;

          const companyCount =  res.data.data.companyCount;
          const jobCount =  res.data.data.jobCount;
          // const resumeCount =  res.data.data.resumeCount;
          const videoCount =  res.data.data.videoCount;
          const liveCount =  res.data.data.liveCount;

          const articleCount =  res.data.data.articleCount;
          const commentCount =  res.data.data.commentCount;
          const newsCount =  res.data.data.newsCount;
          const resumeTemplateCount =  res.data.data.resumeTemplateCount;

          let arr =[
            {value: userCount, name: '普通用户'},
            {value: companyUserCount, name: '企业用户'},
            {value: adminCount, name: '管理员'},
          ];
          this.chartData = arr;
          let arr2 =[
            {value: companyCount, name: '企业'},
            {value: jobCount, name: '职位'},
            // {value: resumeCount, name: '简历'},
            {value: videoCount, name: '宣讲视频'},
            {value: liveCount, name: '宣讲直播'},
          ];
          this.chartData2 = arr2;
          let arr3 =[
            {value: articleCount, name: '文章'},
            {value: commentCount, name: '评论'},
            {value: newsCount, name: '资讯'},
            {value: resumeTemplateCount, name: '简历模板'},
          ];
          this.chartData3 = arr3;
          this.setPie1();
          this.setPie2();
          this.setPie3();
        })
  },
  methods:{
    setPie1(){
      this.chart.setOption({
        title: {
          text: "网站用户统计",
          subtext: "实时数据",
          left: "center"
        },
        legend: {
          // orient: 'vertical',
          // top: 'middle',
          bottom: 10,
          left: "center",
          data: ["普通用户", "企业用户", "管理员"]
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
          {  roseType: 'angle',
            name: "人数",
            type: "pie", // 设置图表类型为饼图
            radius: "55%", // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
            data: this.values
          }
        ]
      });
    },
    setPie2(){
      this.chart2.setOption({
        title: {
          text: "招聘求职统计",
          subtext: "实时数据",
          left: "center"
        },
        legend: {
          // orient: 'vertical',
          // top: 'middle',
          bottom: 10,
          left: "center",
          data: ["企业", "职位","简历", "宣讲视频","宣讲直播"]
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
          {  roseType: 'angle',
            name: "数量",
            type: "pie", // 设置图表类型为饼图
            radius: "55%", // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
            data: this.values2
          }
        ]
      });
    },
    setPie3(){
      this.chart3.setOption({
        title: {
          text: "网站资源统计",
          subtext: "实时数据",
          left: "center"
        },
        legend: {
          // orient: 'vertical',
          // top: 'middle',
          bottom: 10,
          left: "center",
          data: ["文章", "评论","资讯", "简历模板"]
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
          {  roseType: 'angle',
            name: "数量",
            type: "pie", // 设置图表类型为饼图
            radius: "55%", // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
            data: this.values3
          }
        ]
      });
    },


  },
  mounted() {
    // [3] 基于准备好的 DOM，初始化 Echarts 实例
    // 使用 ref 访问 DOM, 也可以使用 document.getElementById('chart')
    this.chart = echarts.init(this.$refs.chart,'light');
    this.chart2=echarts.init(this.$refs.chart2,'light');
    this.chart3=echarts.init(this.$refs.chart3,'light');
    // [4] 设置 Echarts 图表数据
  }
};
</script>

<style>
#chart,#chart2,#chart3{
  float: left;
}
</style>
